<template>
  <div class="mui-pages" style="background-color: #fff;">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <span @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></span>
        <div class="header-search flex-center">学习计划</div>
      </div>
    </header>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <div class="work-message-lists">
            <h4>{{data.title}}</h4>
            <div class="organization-lists-time">
              {{fn.formateYearSecond(data.createTime)}}&nbsp;&nbsp;{{data.createByName}}&nbsp;&nbsp;{{data.createGroupName}}&nbsp;&nbsp;
            </div>
            <p class="news-world-details">{{data.content}}</p>
          </div>
          <ul class="mui-table-view organization-lists">
            <li class="mui-table-view-cell" v-for="(data,index) in data.studyPlanWeekVoList" :key="data.id">
              <div class="mine-lists-content flex-between-center" @click="detail(data)">
                <div class="statistics-lists">
                  <h2 class="organization-lists-title"><b>周度学习主题：</b>{{data.subject}}</h2>
                  <div class="flex-between-center mine-lists-tips">
                    <p><b class="mine-lists-title">学习时间：</b>{{formateTime(data.studyBeginTime)}}-{{formateTime(data.studyEndTime)}}</p>
                    <span v-if="meetingStatus(data.meetingStatus)" class="mine-lists-money">{{data.meetingStatus}}</span>
                    <span v-if="!meetingStatus(data.meetingStatus)">{{data.meetingStatus}}</span>
                  </div>
                </div>
                <span class="mui-icon mui-icon-arrowright"></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  export default {
    name: 'studyPlan',
    data () {
      return {
        fn: tools,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        objectsName: '',
        data: {},
        infinite: true,
        pageIndex: 0,
        year: new Date().getFullYear()
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      detail (data) {
        this.$router.push({path: `/studyDetails/${data.id}`})
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.loadData()
      },
      reloadData () {
        this.pageIndex = 0
        this.swipeData = []
        this.loadData()
      },
      loadData () {
        let monthId = this.$route.params.monthId
        let userInfo = this.$store.state.userInfo
        this.partyGroupId = userInfo.partyMemberModel.partyGroupId
        let data = {
          partyGroupId: this.partyGroupId,
          monthId: monthId
        }
        loginService.getStudyPlanMonthAndWeekByMonthId(data).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.data = res.data
        })
      },
      formateTime (str) {
        moment.lang('zh-cn')
        return moment(str).format('MM月DD日')
      },
      meetingStatus (str) {
        return str === "未开展"
      }
    }
  }
</script>

<style scoped>

</style>
